import React, { Component } from 'react';

import { Table ,Popconfirm} from 'antd';
import { Resizable } from 'react-resizable';

const ResizeableTitle = (props) => {
    const { onResize, width, ...restProps } = props;
  
    if (!width) {
      return <th {...restProps} />;
    }
  
    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  
class basic extends Component {
    constructor(props) {
        super(props);
        console.log('kkkkkkk')
        this.state = {
            columns: [{
                title: 'Date',
                dataIndex: 'date',
                width: 200,
              }, {
                title: 'Amount',
                dataIndex: 'amount',
                width: 100,
              }, {
                title: 'Type',
                dataIndex: 'type',
                width: 100,
              }, {
                title: 'Note',
                dataIndex: 'note',
                width: 100,
              }, {
                title: 'Action',
                key: 'action',
                render: (text, record) => (
                    <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(text,record.key)}>
                    <span>Delete</span>
                  </Popconfirm>
                ),
              }],
        };
        
    }
    components = {
        header: {
          cell: ResizeableTitle,
        },
      };
      data = [{
        key: 0,
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer',
      }, {
        key: 1,
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer',
      }, {
        key: 2,
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer',
      }];

       rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      }
       students = ["张三然","李慧思","赵思然","孙力气","钱流量"]; 
    
      handleResize = index => (e, { size }) => {
        this.setState(({ columns }) => {
          const nextColumns = [...columns];
          nextColumns[index] = {
            ...nextColumns[index],
            width: size.width,
          };
          return { columns: nextColumns };
        });
      };
      handleDelete = (text,key) => {
        console.log(text,'hhhhhhhhh')
        const dataSource = [...this.data];
        console.log(dataSource,'dataSource')
        this.setState({ [this.data]: dataSource.filter(item => item.key !== key) });
        console.log('this.data',this.data)
      }

    componentWillMount() {

    }

    componentDidMount() {

    }


    render() {
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
              width: column.width,
              onResize: this.handleResize(index),
            }),
          }));
      
        return (
            <div>
               <Table
                bordered
                components={this.components}
                columns={columns}
                rowSelection={this.rowSelection}
                dataSource={this.data}
                onHeaderRow={(column) => {
                  return {
                    onClick: () => {
                      console.log(column)
                    },        // 点击表头行
                  };
                }}
            /> 
            <ul>
                {
                  this.students.map((userName,i) => {
                    return <li key={i}>{userName}</li>
                  })
                }
            </ul>
        
            </div>
          
        );
    }
}


export default basic;